<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="/meetTWO/public/static/bootstrap/css/bootstrap.min.css" type="text/css" rel="Stylesheet" />
    <link href="/meetTWO/public/static/css/sign.css" type="text/css" rel="stylesheet">
    <script src="/meetTWO/public/static/jquery/jquery-3.3.1.js" type="text/javascript"></script>
    <title>遇见冬奥</title>
    <style></style>
</head>

<body>
    <div class="sign-box">
        <form class="form-signin col-lg-3">
            <br />
            <center>
                <h1>遇见冬奥</h1>
            </center>
            <br />
            <br />
            <div class="form-group  has-feedback" id="user-div">
                <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-user " aria-hidden="true"></span>
                    <input type="text" class="form-control input-lg " placeholder="请输入用户名" id="user_name" aria-describedby="inputSuccess2Status">
                </div>
                <span class="glyphicon glyphicon-ok form-control-feedback input-Prompt" aria-hidden="true"></span>
                <span id="inputSuccess3Status" class="sr-only">(success)</span>
            </div>
            <br />
            <div class="form-group has-feedback">
                <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-lock " aria-hidden="true"></span>
                    <input type="password" class="form-control input-lg col-lg-3" placeholder="请输入用密码" id="password">
                </div>
            </div>
            <br />
            <button type="submit" class="btn btn-lg btn-default col-lg-3 btn-block" id="sign-buton">
                <strong>登陆</strong>
            </button>
            <br />
            <br />
            <br />
        </form>
    </div>
</body>


</html>

<script>
    $(document).ready(function() {
        $('#user_name').blur(function() {
            $.get('/meetTWO/public/admin/Sign/verifyId', {
                userId: this.value
            }, function(data) {
                let res = JSON.parse(data)
                if (res.succ) {
                    $('#user-div').removeClass('has-error').addClass('has-success')
                    $('#user-div .input-Prompt').removeClass('glyphicon-remove').addClass('glyphicon-ok')
                } else {
                    $('#user-div').removeClass('has-success').addClass('has-error')
                    $('#user-div .input-Prompt').removeClass('glyphicon-ok').addClass('glyphicon-remove')
                }
            })
        })

        $('form').submit(function() {

                console.log($($(this).find('input')[0])[0].value)
                $.post('/meetTWO/public/admin/Sign/submit', {
                        userId: $('#user_name')[0].value,
                        password: $('#password')[0].value
                    },
                    function(data) {
                        let res = JSON.parse(data)
                        if (res.succ) {
                            window.location.href = '/meetTWO/public/admin';
                        } else {
                            $('form').shake(5, 20, 100)

                        }
                    })

                return false;
            })
            //给jq增加抖动效果
        jQuery.fn.shake = function(intShakes /*Amount of shakes*/ , intDistance /*Shake distance*/ , intDuration /*Time duration*/ ) {
            this.each(function() {
                let jqNode = $(this)
                while (intShakes--) {
                    jqNode.animate({ //相对左边运动，right没用
                        left: intDistance * -1
                    }, intDuration / 4).animate({
                        left: intDistance
                    }, intDuration / 2).animate({
                        left: 0
                    }, intDistance / 4)
                }
            })
        }


    })
</script>